<!doctype html>
<html>
<head>
<meta charset="utf-8">
<TITLE>论坛</TITLE>
<Link rel="stylesheet" type="text/css" href="style/style.css" />
<Link rel="stylesheet" type="text/css" href="style/index.css" />
	<Link rel="stylesheet" type="text/css" href="style/post.css" />
	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
</HEAD>

<BODY>
<div id="app">
	<DIV class="logo">
		<img src="https://www.puchedu.cn/uploads/1/253/57103530/2294053701.jpg" 
			alt="logo" style="max-width: 100%;
			max-height: 100px; height: auto;">
	</DIV>
	<!--      用户信息、登录、注册        -->

	<DIV class="h">
		<div class="login">
			您尚未　<a href="login.html">登录</a>
			&nbsp;| &nbsp; <A href="reg.html">注册</A> |
		</div>
	</DIV>

	<!--      主体        -->
	<main>
		<div class="content">
			<DIV class="t left">
				<TABLE cellSpacing="0" cellPadding="0" width="100%">
					<TR class="tr2" align="center">
						<TD colSpan="2">论坛</TD>
						<TD style="WIDTH: 10%;">主题</TD>
						<TD style="WIDTH: 30%">最后发表</TD>
					</TR>

					<template v-for=" b in boards">
						<!--       主版块       -->
						<TR class="tr3">
							<TD colspan="4">{{b.boardname}}</TD>
						</TR>
						<!--       子版块       -->
						<TR class="tr3" v-for=" sub in b.children">
							<TD width="5%">&nbsp;</TD>
							<TH align="left">
								<IMG src="image/board.gif">
								<A href="list.html">{{sub.boardname}}</A>
							</TH>
							<TD align="center">??</TD>
							<TH>
					<SPAN>
						<A href="detail.html">???</A>
					</SPAN>
								<BR/>
								<SPAN>??</SPAN>
								<SPAN class="gray">[ 2007-07-30 10:25 ?? ]</SPAN>
							</TH>
						</TR>
					</template>
				</TABLE>
			</DIV>
			<div class="right">
				<div slot="header" class="clearfix" align="center">
					<h1 style="color: white;">最新帖子</h1>
				</div>
				<!-- 渲染最新的帖子列表 -->
				<el-card class="box-card 帖子" v-for="topic in topics" :key="topic.id">
					<el-row>
						<el-col :span="24">
							<h2 class="帖子-title">{{ topic.title }}</h2>
							<div class="帖子-content" v-html="truncateContent(topic.content)"></div>
							<el-link :href="'detail.html?id=' + topic.id" type="primary">阅读更多</el-link>
							<div style="color: green;">{{ topic.publishtime }}</div>
						</el-col>
					</el-row>
				</el-card>
			</div>
		</div>
	</main>
	<BR/>
	<CENTER class="gray">源辰信息</CENTER>
</div>
<script>
	var v = new Vue({
		el: "#app",
		data: {
			boards: [],
			topics: []
		},
		created() {
			axios.get("board/query").then(res => {
				this.boards = res.data;
			});
			axios.get("topic/latest").then(res => {
				this.topics = res.data;
			});
		},
		methods: {
			truncateContent(content) {
				return content.length > 100 ? content.substring(0, 100) + '...' : content;
			}
		}
	})

</script>
</BODY>
</HTML>
